<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String path=request.getContextPath();
String uiPath=path+"/TopJUI";
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <!-- TopJUI框架样式 -->
    <link type="text/css" href="<%=uiPath %>/topjui/css/topjui.core.min.css" rel="stylesheet">
    <link type="text/css" href="<%=uiPath %>/topjui/themes/default/topjui.red.css" rel="stylesheet" id="dynamicTheme"/>
    <!-- FontAwesome字体图标 -->
    <link type="text/css" href="<%=uiPath %>/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- layui框架样式 -->
    <link type="text/css" href="<%=uiPath %>/static/plugins/layui/css/layui.css" rel="stylesheet"/>
    <!-- jQuery相关引用 -->
    <script type="text/javascript" src="<%=uiPath %>/static/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="<%=uiPath %>/static/plugins/jquery/jquery.cookie.js"></script>
    <!-- TopJUI框架配置 -->
    <script type="text/javascript" src="<%=uiPath %>/static/public/js/topjui.config.js"></script>
    <!-- TopJUI框架核心-->
    <script type="text/javascript" src="<%=uiPath %>/topjui/js/topjui.core.min.js"></script>
    <!-- TopJUI中文支持 -->
    <script type="text/javascript" src="<%=uiPath %>/topjui/js/locale/topjui.lang.zh_CN.js"></script>
    <!-- layui框架js -->
    <script type="text/javascript" src="<%=uiPath %>/static/plugins/layui/layui.js" charset="utf-8"></script>
</head>

<body>
<!-- layout布局 开始 -->
<div data-toggle="topjui-layout" data-options="fit:true">
    <div data-options="region:'center',title:'',fit:false,split:true,border:false,bodyCls:'border_right_bottom'"
         style="height:60%">
        <!-- datagrid表格 -->
        <table id="productDg"></table>
    </div>
    <div data-options="region:'south',fit:false,split:true,border:false"
         style="height:40%">
        <div data-toggle="topjui-tabs"
             data-options="id:'southTabs',
             fit:true,
             border:false,
             parentGrid:{
                 type:'datagrid',
                 id:'productXQDg',
                 param:'puuid:uuid,userNameId:userNameId,userName:userName'
             }">
            <div title="实际成本支出" data-options="id:'tab0',iconCls:'fa fa-th'">
                <!-- datagrid表格 -->
                <div data-toggle="topjui-tabs"
			    	data-options="id:'southTabs',
			             fit:true,
			             border:false,
			             parentGrid:{
			                 type:'datagrid',
			                 id:'productXQDg',
			                 param:'puuid:uuid,userNameId:userNameId,userName:userName'
			             }">
				    <a id="addReal" href="javascript:void(0)">新增</a>
				    <a id="editReal" href="javascript:void(0)">编辑</a>
				    <a id="deleteReal" href="javascript:void(0)">删除</a>
				</div>
                <table id="realExpenditure"></table>
            </div>
            <div title="费用支出" data-options="id:'tab1',iconCls:'fa fa-th'">
                <!-- datagrid表格 -->
                <div data-toggle="topjui-tabs"
			    	data-options="id:'southTabs',
			             fit:true,
			             border:false,
			             parentGrid:{
			                 type:'datagrid',
			                 id:'productXQDg',
			                 param:'puuid:uuid,userNameId:userNameId,userName:userName'
			             }">
				    <a id="addCost" href="javascript:void(0)">新增</a>
				    <a id="editCost" href="javascript:void(0)">编辑</a>
				    <a id="deleteCost" href="javascript:void(0)">删除</a>
				</div>
                <table id="costExpenditure"></table>
            </div>
            <div title="税费支出" data-options="id:'tab2',iconCls:'fa fa-th'">
                <!-- datagrid表格 -->
                <div data-toggle="topjui-tabs"
			    	data-options="id:'southTabs',
			             fit:true,
			             border:false,
			             parentGrid:{
			                 type:'datagrid',
			                 id:'productXQDg',
			                 param:'puuid:uuid,userNameId:userNameId,userName:userName'
			             }">
				    <a id="addTax" href="javascript:void(0)">新增</a>
				    <a id="editTax" href="javascript:void(0)">编辑</a>
				    <a id="deleteTax" href="javascript:void(0)">删除</a>
				</div>
                <table id="taxExpenditure"></table>
            </div>
        </div>
    </div>
</div>
<!-- layout布局 结束 -->

<!-- 表格工具栏开始 -->
<div id="productDg-toolbar" class="topjui-toolbar"
     data-options="grid:{
           type:'datagrid',
           id:'productDg'
       }">
    <form id="queryForm">
        <input type="text" name="name" data-toggle="topjui-textbox"
               data-options="id:'projectName',prompt:'项目名称'">
        <input type="text" name="code" data-toggle="topjui-textbox"
               data-options="id:'projectCode',prompt:'项目编号'">
        <a id="queryBtn" href="javascript:void(0)">查询</a>
    </form>
</div>
<!-- 表格工具栏结束 -->
</body>
<script>
    function progressFormatter(value, rowData, rowIndex) {
        var htmlstr = '<div id="p" data-toggle="topjui-progressbar progressbar" data-options="value:' + value + '" style="width: 398px; height: 26px;">';
        htmlstr += '<div class="progressbar-text" style="width: 398px; height: 26px; line-height: 26px;">' + value + '%</div>';
        htmlstr += '<div class="progressbar-value" style="width: ' + value + '%; height: 26px; line-height: 26px;">';
        htmlstr += '<div class="progressbar-text" style="width: 398px; height: 26px; line-height: 26px;">' + value + '%</div>';
        htmlstr += '</div>';
        htmlstr += '</div>';
        return htmlstr;
    }
    
    $(function () {
        var projectList = {
            type: 'datagrid',
            id: 'productDg'
        };

        $("#productDg").iDatagrid({
            id: 'productDg',
            url: '<%=path%>/TopJUI/json/product/accountList.json',
            fitColumns: true,
            columns: [[
                {field: 'uuid', title: 'UUID', checkbox: true},
                {field: 'projectCode', title: '项目编号', sortable: true},
                {field: 'projectName', title: '项目名称', sortable: true},
                {field: 'clientName', title: '客户', sortable: true},
                {field: 'projectManager', title: '项目负责人', sortable: true},
                {field: 'projectAmount', title: '项目合同金额', sortable: true},
                {field: 'realAmount', title: '实际金额', sortable: true},
                {field: 'invoicingAmount', title: '开票金额（不含税）', sortable: true},
                {field: 'taxAmount', title: '税额', sortable: true},
                {field: 'repaymentAmount', title: '回款金额', sortable: true},
                {field: 'isGenerate', title: '核算单生成', sortable: true},
            ]],
            onClickRow: function (index, row) {
            	$("#realExpenditure").iDatagrid({
                    id: 'realExpenditure',
                    url: '<%=path%>/TopJUI/json/product/realExpenditure.json',
                    fitColumns: true,
                    columns: [[
                        {field: 'uuid', title: 'UUID', checkbox: true},
                        {field: 'date', title: '日期', sortable: true},
                        {field: 'name', title: '名称', sortable: true},
                        {field: 'beforeTaxAmount', title: '税前金额', sortable: true},
                        {field: 'taxAmount', title: '税额', sortable: true},
                        {field: 'amount', title: '总金额', sortable: true},
                        {field: 'payType', title: '付款方式', sortable: true},
                        {field: 'type', title: '收据类型', sortable: true},
                    ]]
                });
            	$("#costExpenditure").iDatagrid({
                    id: 'costExpenditure',
                    url: '<%=path%>/TopJUI/json/product/costExpenditure.json',
                    fitColumns: true,
                    columns: [[
                        {field: 'uuid', title: 'UUID', checkbox: true},
                        {field: 'name', title: '名称', sortable: true},
                        {field: 'use', title: '费用用途', sortable: true},
                        {field: 'amount', title: '费用金额', sortable: true},
                        {field: 'reason', title: '费用原因', sortable: true},
                        {field: 'note', title: '备注', sortable: true}
                    ]]
                });
            	$("#taxExpenditure").iDatagrid({
                    id: 'taxExpenditure',
                    url: '<%=path%>/TopJUI/json/product/taxExpenditure.json',
                    fitColumns: true,
                    columns: [[
                        {field: 'uuid', title: 'UUID', checkbox: true},
                        {field: 'name', title: '名称', sortable: true},
                        {field: 'ratio', title: '计算比率', sortable: true},
                        {field: 'amount', title: '金额', sortable: true},
                        {field: 'note', title: '备注', sortable: true}
                    ]]
                });
            }
        });

        /* 点击查询按钮 */
        $('#queryBtn').iMenubutton({
            event: 'query',
            iconCls: 'fa fa-search',
            btnCls: 'topjui-btn-danger',
            form: {id: 'queryForm'},
            grid: {type: 'datagrid', 'id': 'productDg'}
        });
        
        /* 添加实际支出*/
        $("#addReal").iMenubutton({
            event: 'openDialog',
            iconCls: 'fa fa-plus',
            dialog: {
                id: 'userAddDialog',
                height: 500,
                href: '<%=path%>/PAGES/hpf/ProjectAccounting/realExpenditureAdd.jsp',
                buttonsGroup: [
                    {
                        text: '保存',
                        url: _ctx + '/json/response/success.json',
                        iconCls: 'fa fa-plus',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn-normal'
                    }
                ]
            }
        });

        /* 编辑实际支出 */
        $("#editReal").iMenubutton({
            event: 'openDialog',
            iconCls: 'fa fa-pencil',
            btnCls: 'topjui-btn',
            grid: productDg,
            dialog: {
                height: 500,
                href: _ctx + '/html/complex/dialog_edit.html?uuid={uuid}',
                url: _ctx + '/json/product/detail.json?uuid={uuid}',
                buttonsGroup: [
                    {
                        text: '更新',
                        url: _ctx + '/json/response/success.json',
                        iconCls: 'fa fa-save',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn'
                    }
                ]
            }
        });
        
        /* 删除实际支出 */
        $("#deleteReal").iMenubutton({
            event: 'openDialog',
            iconCls: 'fa fa-trash',
            btnCls: 'topjui-btn-normal',
            grid: productDg,
            dialog: {
                height: 500,
                href: _ctx + '/html/complex/dialog_edit.html?uuid={uuid}',
                url: _ctx + '/json/product/detail.json?uuid={uuid}',
                buttonsGroup: [
                    {
                        text: '更新',
                        url: _ctx + '/json/response/success.json',
                        iconCls: 'fa fa-save',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn'
                    }
                ]
            }
        });
        
        /* 添加费用支出*/
        $("#addCost").iMenubutton({
            event: 'openDialog',
            iconCls: 'fa fa-plus',
            dialog: {
                id: 'userAddDialog',
                height: 500,
                href: '<%=path%>/PAGES/hpf/ProjectAccounting/costExpenditureAdd.jsp',
                buttonsGroup: [
                    {
                        text: '保存',
                        url: _ctx + '/json/response/success.json',
                        iconCls: 'fa fa-plus',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn-normal'
                    }
                ]
            }
        });

        /* 编辑费用支出 */
        $("#editCost").iMenubutton({
            event: 'openDialog',
            iconCls: 'fa fa-pencil',
            btnCls: 'topjui-btn',
            grid: productDg,
            dialog: {
                height: 500,
                href: _ctx + '/html/complex/dialog_edit.html?uuid={uuid}',
                url: _ctx + '/json/product/detail.json?uuid={uuid}',
                buttonsGroup: [
                    {
                        text: '更新',
                        url: _ctx + '/json/response/success.json',
                        iconCls: 'fa fa-save',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn'
                    }
                ]
            }
        });
        
        /* 删除费用支出 */
        $("#deleteCost").iMenubutton({
            event: 'openDialog',
            iconCls: 'fa fa-trash',
            btnCls: 'topjui-btn-normal',
            grid: productDg,
            dialog: {
                height: 500,
                href: _ctx + '/html/complex/dialog_edit.html?uuid={uuid}',
                url: _ctx + '/json/product/detail.json?uuid={uuid}',
                buttonsGroup: [
                    {
                        text: '更新',
                        url: _ctx + '/json/response/success.json',
                        iconCls: 'fa fa-save',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn'
                    }
                ]
            }
        });
        
        /* 添加税费支出*/
        $("#addTax").iMenubutton({
            event: 'openDialog',
            iconCls: 'fa fa-plus',
            dialog: {
                id: 'userAddDialog',
                height: 500,
                href: '<%=path%>/PAGES/hpf/ProjectAccounting/taxExpenditureAdd.jsp',
                buttonsGroup: [
                    {
                        text: '保存',
                        url: _ctx + '/json/response/success.json',
                        iconCls: 'fa fa-plus',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn-normal'
                    }
                ]
            }
        });

        /* 编辑税费支出*/
        $("#editTax").iMenubutton({
            event: 'openDialog',
            iconCls: 'fa fa-pencil',
            btnCls: 'topjui-btn',
            grid: productDg,
            dialog: {
                height: 500,
                href: _ctx + '/html/complex/dialog_edit.html?uuid={uuid}',
                url: _ctx + '/json/product/detail.json?uuid={uuid}',
                buttonsGroup: [
                    {
                        text: '更新',
                        url: _ctx + '/json/response/success.json',
                        iconCls: 'fa fa-save',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn'
                    }
                ]
            }
        });
        
        /* 删除税费支出*/
        $("#deleteTax").iMenubutton({
            event: 'openDialog',
            iconCls: 'fa fa-trash',
            btnCls: 'topjui-btn-normal',
            grid: productDg,
            dialog: {
                height: 500,
                href: _ctx + '/html/complex/dialog_edit.html?uuid={uuid}',
                url: _ctx + '/json/product/detail.json?uuid={uuid}',
                buttonsGroup: [
                    {
                        text: '更新',
                        url: _ctx + '/json/response/success.json',
                        iconCls: 'fa fa-save',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn'
                    }
                ]
            }
        });
    });

    // 自定义方法
    function myQuery() {
        // 提示信息
        $.iMessager.alert('自定义方法', '自定义方法被执行了！', 'messager-info');
        // 提交参数查询表格数据
        $('#productDg').iDatagrid('reload', {
            name: $('#name').iTextbox('getValue'),
            code: $('#code').iTextbox('getValue')
        });
    }
</script>
</html>